<script setup lang="ts" name="MenuButtonDrawer">
import { base } from '@/api/public'
import MenuButtonAddEdit from './menuButtonAddEdit.vue'
import useDictionaryEntry from '@/hooks/useDictionaryEntry'
import { transformI18n } from '@/plugins/i18n'
const { getDictionaryEntryData } = useDictionaryEntry()
const visible = ref(false)
const title = ref('')
const menuPermissionsButtonList: any = ref([])
const showDrawer = (v) => {
  console.log(v)
  visible.value = true
  title.value = v.title
  searchData.value.menuID = v.id
  getInitData()
}
// 子组件将方法暴露给父组件
defineExpose({ showDrawer })
const searchData:any = ref({
  menuID: '',
  label: '',
  value: '',
  requestType: ''
})
// 获取当前查询条件下的数据
const getInitData = async () => {
  const result: any = {}
  result.menuID = searchData.value.menuID
  result.label = searchData.value.label
  result.value = searchData.value.stvalueatus
  result.requestType = searchData.value.requestType
  base.menuPermit(result, { config: { showLoading: false, mockEnable: true } }).then((res:any) => {
    console.log(res)
    if (res.data && res.data.length > 0) {
      setTimeout(() => {
        menuPermissionsButtonList.value = res.data
      }, 1000)
    }
  })
}
// 查询条件重置
const resetSearch = () => {
  searchData.value.label = ''
  searchData.value.value = ''
  searchData.value.requestType = ''
  getInitData()
}
const menuButtonAddEditDialog = ref(null)
// 新增事件
const add = () => {
  menuButtonAddEditDialog.value.showDialog(null)
}
// 编辑事件
const edit = (item) => {
  menuButtonAddEditDialog.value.showDialog(item)
}

const deleteRow = (v) => {
  const msg = transformI18n('page.确定删除吗？', true)
  ElMessageBox.alert(msg, transformI18n('moduleTitle.警告', true), {
    showCancelButton: true,
    confirmButtonText: transformI18n('buttons.buttonConfirm', true),
    cancelButtonText: transformI18n('buttons.buttonCancel', true),
    type: 'warning',
    callback: (action) => {
      if (action === 'confirm') {
        ElMessage({
          type: 'info',
          message: `操作: 点击了确认`
        })
      } else {
        ElMessage({
          type: 'info',
          message: `操作: 点击了取消`
        })
      }
    }
  })
}

const menuButtonTypeList = ref([])
const getMenuButtonTypeList = async () => {
  menuButtonTypeList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'systemButton'
  })
}
getMenuButtonTypeList()

const requestTypeList = ref([])
const getRequestTypeList = async () => {
  requestTypeList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'requestType'
  })
}
getRequestTypeList()
</script>

<template>
  <el-drawer class="dictionary-drawer" v-model="visible" direction="rtl" size="70%">
    <template #header>
      <h2>
        {{ $t('page.来自菜单') }}
        <el-tag class="ml-10px">{{ $t('menus.' + title) }}</el-tag>
      </h2>
    </template>
    <template #default>
      <el-form :inline="true">
        <el-form-item :label="$t('page.名称')">
          <el-select v-model="searchData.label" :placeholder="$t('placeholders.请选择')" allow-create filterable clearable style="width: 120px;">
            <el-option v-for="item in menuButtonTypeList" :key="item.value" :label="$t('menus.' + item.label)" :value="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('page.权限值')">
          <el-input v-model="searchData.value" :placeholder="$t('placeholders.请输入') + $t('page.权限值')" clearable />
        </el-form-item>
        <el-form-item :label="$t('page.请求方式')">
          <el-select v-model="searchData.requestType" :placeholder="$t('placeholders.请选择')" clearable style="width: 120px;">
            <el-option v-for="item in requestTypeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getInitData">{{ $t('buttons.buttonSearch') }}</el-button>
          <el-button icon="Refresh" @click="resetSearch">{{ $t('buttons.buttonReset') }}</el-button>
          <el-button type="success" icon="Plus" @click="add()">{{ $t('buttons.buttonCreate') }}</el-button>
        </el-form-item>
      </el-form>
      <div class="flex-1 table-layout">
        <div class="table-wrap">
          <el-table v-if="menuPermissionsButtonList.length > 0" :data="menuPermissionsButtonList" border>
            <el-table-column type="index" :label="$t('page.序号')" width="60" />
            <el-table-column prop="label" :label="$t('page.权限名称')" width="140">
              <template #default="scope">
                <el-tag :type="scope.row.tagColor === 'primary' ? '' : scope.row.tagColor">{{ transformI18n('menus.' + scope.row.label, true) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="value" :label="$t('page.权限值')" width="140" />
            <el-table-column prop="requestType" :label="$t('page.请求方式')" width="130" align="center">
              <template #default="scope">
                <el-tag type="danger">{{ scope.row.requestType }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="address" :label="$t('page.接口地址')" />
            <el-table-column prop="operate" :label="$t('page.操作')" width="140" align="center">
              <template #default="scope">
                <el-button type="primary" icon="Edit" @click="edit(scope.row)"></el-button>
                <el-button type="danger" icon="Delete" @click="deleteRow(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <MenuButtonAddEdit ref="menuButtonAddEditDialog" :menuButtonTypeList="menuButtonTypeList" :requestTypeList="requestTypeList"></MenuButtonAddEdit>
    </template>
  </el-drawer>
</template>

<style lang="scss">
.dictionary-drawer {

  .el-drawer__header {
    margin: 0;
    padding: 15px var(--el-space);
    border-bottom: 1px solid var(--el-border-color-extra-light);
  }

  .el-drawer__footer {
    margin: 0;
    padding: 15px var(--el-space);
  }

  .el-drawer__body {
    display: flex;
    flex-direction: column;
    padding: calc(var(--el-space) - 6px) var(--el-space) var(--el-space);
  }

  .el-pagination {
    align-items: center;
    justify-content: flex-end;
  }
}

.table-layout {
  position: relative;
  margin: calc(var(--el-space) - 6px) 0 0;

  .table-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .el-table {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
